<template>
  <div class="major-status">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>大作业提交情况</span>
        </div>
      </template>
      <el-form :inline="true" :model="query" class="demo-form-inline">
        <el-form-item label="学生姓名">
          <el-input v-model="query.studentName" placeholder="姓名" clearable />
        </el-form-item>
        <el-form-item label="学号">
          <el-input v-model="query.studentNo" placeholder="学号" clearable />
        </el-form-item>
        <el-form-item label="班级">
          <el-input v-model="query.className" placeholder="班级" clearable />
        </el-form-item>
        <el-form-item label="课程名">
          <el-input v-model="query.courseName" placeholder="课程名" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadReports">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="reports" stripe style="width: 100%" v-loading="loading">
        <el-table-column prop="studentName" label="学生姓名" width="150" />
        <el-table-column prop="studentNo" label="学号" width="140" />
        <el-table-column prop="className" label="班级" width="140" />
        <el-table-column prop="courseName" label="课程名" width="180" />
        <el-table-column label="大作业报告">
          <template #default="{ row }">
            <a :href="toFullUrl(row.fileUrl)" target="_blank">{{ row.fileName }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="submitDate" label="上传日期" width="140" />
        <el-table-column prop="uploadTime" label="上传时间" width="180" />
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { majorReportApi } from '@/api/majorReport'

export default {
  name: 'MajorReportStatus',
  setup() {
    const loading = ref(false)
    const reports = ref([])
    const query = reactive({ studentName: '', studentNo: '', className: '', courseName: '' })

    const toFullUrl = (fileUrl) => {
      if (!fileUrl) return ''
      return `http://localhost:8081${fileUrl}`
    }

    const loadReports = async () => {
      loading.value = true
      try {
        const params = {}
        if (query.studentName) params.studentName = query.studentName
        if (query.studentNo) params.studentNo = query.studentNo
        if (query.className) params.className = query.className
        if (query.courseName) params.courseName = query.courseName
        const res = await majorReportApi.getReports(params)
        reports.value = Array.isArray(res.data?.data) ? res.data.data : []
      } catch (e) {
        ElMessage.error(e?.response?.data?.message || e.message || '查询失败')
      } finally {
        loading.value = false
      }
    }

    const reset = () => {
      query.studentName = ''
      query.studentNo = ''
      query.className = ''
      query.courseName = ''
      loadReports()
    }

    onMounted(() => {
      loadReports()
    })

    return {
      loading,
      reports,
      query,
      toFullUrl,
      loadReports,
      reset
    }
  }
}
</script>

<style scoped>
.major-status { padding: 20px; }
.card-header { display: flex; justify-content: space-between; align-items: center; }
.search-form { margin-bottom: 16px; }
</style>